<template>
  <el-card class="box-card">
    <div class="header">
      <span>{{ item.nickName || "" }}</span>
      <i class="el-icon-close" @click="handleDelete"></i>
    </div>
    <div class="txt">
      <p>
        <label>角色音色：</label
        >{{ volcengineVoicesList.find((x) => x.value == item.voiceName)["label"] }}
      </p>
      <p><label>语言模型: </label>{{ item.modelName || "" }}</p>
      <p><label>最近对话: </label> {{ item.lastTime ? item.lastTime : "无" }}</p>
    </div>
    <div class="btns">
      <el-button size="mini" @click="handleToPage('/agents/configureRoles')"
        >配置角色</el-button
      >
      <!-- <el-button size="mini" @click="handleToPage('/agents/voiceprintRecognition')"
        >声纹识别</el-button
      > -->
      <el-button size="mini" @click="handleToPage('/agents/history')">历史对话</el-button>
      <el-button size="mini" @click="handleAddDevice" v-if="item.totalDevice == 0"
        >添加设备</el-button
      >
      <el-button size="mini" @click="handleToPage('/agents/detail')" v-else
        >管理设备({{ item.totalDevice }})</el-button
      >
    </div>
    <add-dialog :open="open" @cancel="cancel" :role-id="item.roleId" @getList="getList" />
  </el-card>
</template>

<script>
import addDialog from "./add-dialog";
import { volcengineVoicesList } from "./volcengineVoicesList";
import { delAgents, addDevice } from "@/api/login";
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      volcengineVoicesList,
      open: false,
    };
  },
  components: {
    addDialog,
  },
  created() {},
  methods: {
    handleEdit() {
      const { item } = this;
      this.$emit("handleEdit", item);
    },
    async handleDelete() {
      const { item } = this;
      try {
        const flag = await this.$modal.confirm("是否确认删除该数据项？");
        if (!flag) return;
        await delAgents(item.roleId);
        this.getList();
        this.$modal.msgSuccess("删除成功");
      } catch (error) {
        console.error("操作失败", error);
      }
    },
    getList() {
      this.$emit("getList");
    },
    handleToPage(page) {
      const { roleId } = this.item;
      this.$router.push(`${page}?roleId=${roleId}`);
    },
    handleAddDevice() {
      this.open = true;
    },
    cancel() {
      this.open = false;
    },
  },
};
</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 20px;
}
.txt {
  margin: 16px auto;
  p {
    margin: 0 0 5px 0;
    font-size: 14px;
    line-height: 1.5714285714285714;
  }
}

.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  span {
    font-size: 22px;
  }
  .el-icon-close:hover {
    color: #f00;
    cursor: pointer;
  }
}
.btns {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  gap: 7px;
  .el-button {
    display: flex;
    margin-left: 0 !important;
  }
}
</style>
